<template>
  <div>
    <el-divider></el-divider>
    <el-descriptions title="基本信息" :column="3">
      <el-descriptions-item label="项目编号"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.id }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.id" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="区域"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.areas }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.areas" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="货值"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.totalProjectPrice }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.totalProjectPrice" 
          ></el-input>
        </div>
      </el-descriptions-item>
     
      <el-descriptions-item label="项目名称"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.name }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.name" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="项目类型" :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.projectType }}</div>
        <div v-else>
          <el-select 
            v-model="localInfoobj.projectType"  
            placeholder="请选择项目类型" 
            filterable 
          >
            <el-option v-for="(item,index) in projectTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="实际货值"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.actualValuePrice }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.actualValuePrice" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="签约公司"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.projectName }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.projectName" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="商务"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.bussinessUsername }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.bussinessUsername" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="内部货值"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.innerTotalPrice }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.innerTotalPrice" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="选品负责人"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.productSelectionAssistantId }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.productSelectionAssistantId" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="数量"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.totalProjectNum }}</div>
        <div v-else>
          <el-input 
            disabled 
            v-model="localInfoobj.totalProjectNum" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="客户公司名称"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.invoiceCompanyinvoiceCompany }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.invoiceCompanyinvoiceCompany" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="选品助理"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.productSelectionAssistantId }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.productSelectionAssistantId" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="品名"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.productName }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.productName" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="品牌名称"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.brands }}</div>
        <div v-else>
          <el-input
            v-model="localInfoobj.brands" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="配包专员"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">配包专员</el-descriptions-item>
      <el-descriptions-item label="品类"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.cates }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.cates" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="客户负责人"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">客户负责人</el-descriptions-item>
      <el-descriptions-item label="合同专员"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">合同专员</el-descriptions-item>
      <el-descriptions-item label="执行"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ localInfoobj.permissionUsername }}</div>
        <div v-else>
          <el-input 
            v-model="localInfoobj.permissionUsername" 
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="开票公司" :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">
        <div v-if="!showAllInputs">{{ getInvoiceCompanyName(localInfoobj.invoiceCompany)  }}</div>
        <div v-else>
          <el-select 
            v-model="localInfoobj.invoiceCompany"  
            placeholder="请选择项目类型" 
            filterable 
          >
            <el-option v-for="(item,index) in invoiceCompanyList" :key="index" :label="item.sysValueName" :value="item.id"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="开票金额"  :label-class-name="showAllInputs ? 'center justify-end' : 'center justify-start'">{{localInfoobj.invoicePrice}}</el-descriptions-item>
    </el-descriptions>
    
    <!-- 新增的显示/隐藏所有输入框按钮 -->
    <div style="margin: 20px 0; text-align: center;">
      <el-button 
        type="primary" 
        @click="toggleAllInputs"
      >
        {{ showAllInputs ? '取消' : '编辑信息' }}
      </el-button>

      <el-button 
      type="primary" 
      @click="submit"
      v-if="showAllInputs"
    >
     确认
    </el-button>
    </div>
  </div>
</template>

<script>
  import APISysLabel from "@/api/apiSysLabel";
export default {
  props: {
    parentInfoobj: Object,
    invoiceCompanyList:Array
  },
  data() {
    return {
      projectTypeList: [
        { label: "本地生活", value: "本地生活" },
        { label: "快消", value: "快消" }
      ],
      showAllInputs: false,
      localInfoobj: {},
      originalInfoobj: {}

      
    };
  },
  watch: {
    parentInfoobj: {
      handler(newVal) {
        this.localInfoobj = JSON.parse(JSON.stringify(newVal));
      },
      immediate: true 
    }
},
  methods: {
    toggleAllInputs() {
      // 如果是进入编辑模式，保存当前数据作为备份
      if (!this.showAllInputs) {
        this.originalInfoobj = JSON.parse(JSON.stringify(this.localInfoobj));
      } else {
        // 如果是取消编辑，恢复原始数据
        this.localInfoobj = JSON.parse(JSON.stringify(this.originalInfoobj));
      }
      this.showAllInputs = !this.showAllInputs;
    },
    submit(){
      this.$emit('update-info', this.localInfoobj);
    },

    getInvoiceCompanyName(id) {
      console.log(id)
      if (!id || !this.invoiceCompanyList.length) return '';
      const company = this.invoiceCompanyList.find(item => item.id == id);
      return company ? company.sysValueName : '';
    }

  },


}
</script>

<style lang="scss">
.center {
  display: flex !important;
  align-items: center !important;
}

.justify-end {
  justify-content: flex-end !important;
  width: 90px;
}
.justify-start {
  justify-content: flex-start !important;
}

.el-descriptions__title{
  margin-left: 12px!important;
}

.el-descriptions__body{
  padding: 0 20px !important;
}

.el-divider--horizontal{
  margin:0 0 12px 0!important;
}
</style>